<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>组件插槽</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.my {
				width: 600px;
				height: 150px;
				border: 1px solid black;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div id="app">
			 <slot-component>数据</slot-component>
			  <slot-component>
				 用户姓名
			  </slot-component>
			  <slot-component>
			    <h1>插槽的作用</h1>
			  </slot-component>
			  <slot-component></slot-component>
			  <slot-component>
				  <h3>h3-1</h3>
				  <h3>h3-2</h3>
			  </slot-component>
		</div>
		<script>
			Vue.component('slot-component', {
				template: `<div class="my">
				             <h3>slot-component</h3>
							 <slot>默认内容</slot>
				           </div>`
			})

			//1. 实例化一个Vue的实例
			let vm = new Vue({
				el: '#app',
				data: {

				}
			});
		</script>
	</body>
</html>
